<template>
  <div class="Signinsignoutone">
    <el-container v-loading="loading">
      <el-container>
        <el-main>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="box">
                <p class="title">签到</p>
                <el-form
                  :model="ruleForm"
                  status-icon
                  :rules="rules"
                  ref="ruleForm"
                  label-width="50px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="账号" prop="account" style="margin-top:20px;">
                    <el-input v-model="ruleForm.account" autocomplete="off"></el-input>
                  </el-form-item>
                  <div @click="submitForm('ruleForm',ruleForm.account,'签到')" class="yuan">
                    <p>签到</p>
                  </div>
                </el-form>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" style="margin:0 20px">
            <el-card shadow="hover">
              <div class="box">
                <p class="title">签退</p>
                <el-form
                  :model="ruleFormone"
                  status-icon
                  :rules="rules"
                  ref="ruleFormone"
                  label-width="50px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="账号" prop="accountone" style="margin-top:20px;">
                    <el-input v-model="ruleFormone.accountone" autocomplete="off"></el-input>
                  </el-form-item>
                  <div @click="submitForm('ruleFormone',ruleFormone.accountone,'签退')" class="yuan">
                    <p>签退</p>
                  </div>
                </el-form>
              </div>
            </el-card>
          </el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>签到签退记录</span>
              <el-button
                @click="Personneldetails"
                style="float: right; padding: 3px 0"
                type="text"
              >查看</el-button>
            </div>
            <div class="box-Time">
              <div v-for="(item, index) in Punchlist" :key="index" class="text item">
                <p>{{'姓名:'+' '+item.signOwner.name+ ' ' +item.signTime+ ' ' +item.type+' '+'所在学校:'+' '+item.schoolName}}</p>
              </div>
            </div>
          </el-card>
          <!-- 人员详情 -->
          <el-dialog
            title="预约列表"
            :visible.sync="dialogTableVisibleone"
            width="30%"
            :before-close="handleClose"
          >
            <p style="text-align: center;" v-if = "Arron.length == 0">暂无数据</p>
            <el-collapse v-model="activeName" @change="asdaa" accordion>
              <el-collapse-item :title="key"  v-for="(val,key,i) in Arron" :key="i">
                <div  :class = "{'studentListone':floa==indexone}" style="cursor:pointer;padding:5px 0" @click = "Selectthestudent(element,indexone)" v-for="(element,indexone) in val" :key="indexone">
                  {{element.name}}
                </div>
              </el-collapse-item>
            </el-collapse>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submit">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 缺勤人员 -->
          <el-dialog title="选择缺勤" :visible.sync="dialogTableVisible">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="absenceClick">确 定</el-button>
            </span>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Vue from "vue";
import steamroller from "../../transitionTime.js";
export default {
  data() {
    var validateaccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validateaccountone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    return {
      activeName: "1",
      dialogTableVisibleone: false,
      dialogTableVisible: false,
      loading: false,
      ruleForm: {
        account: ""
      },
      ruleFormone: {
        accountone: ""
      },
      rules: {
        account: [{ validator: validateaccount, trigger: "blur" }],
        accountone: [{ validator: validateaccountone, trigger: "blur" }]
      },
      tableData: [],
      multipleSelection: [],
      form: {},
      monitor: "",
      Time: "",
      Timeone: "",
      Punchlist: [],
      Arron:{
        
      },
      Studentaccount:'',
      floa:-1
    };
  },
  created() {
    this.acquisitionTime();
  },
  methods: {
    acquisitionTime() {
      let Data = new Date(new Date().toLocaleDateString());
      let Dateone = new Date(Data.getTime() + 24 * 60 * 60 * 999);
      this.Time = Data.toJSON();
      this.Timeone = Dateone.toJSON();
      this.form = JSON.parse(sessionStorage.getItem("user"));
      this.ApiTimeRecord();
    },
    //请求签到记录
    ApiTimeRecord() {
      this.loading = true;
      this.$api.Basemanager.punchingcardrecord(
        this.form.baseId,
        this.Time,
        this.Timeone
      )
        .then(res => {
          this.Punchlist = res.data.rows;
          for (let i = 0; i < this.Punchlist.length; i++) {
            this.Punchlist[i].signTime = steamroller(
              this.Punchlist[i].signTime
            );
            if (this.Punchlist[i].type === "sign_out") {
              this.Punchlist[i].type = "签退";
            } else if (this.Punchlist[i].type === "sign_in") {
              this.Punchlist[i].type = "签到";
            }
          }
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    submitForm(formName, item, index) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          this.monitor = index;
          // 生成对象
          let Add = {
            baseId: this.form.baseId,
            account: item
          };
          //发送请求
          this.$api.Basemanager.signin(Add)
            .then(res => {
              //判断是教师角色还是学生角色
              if (res.code === 200) {
                if (res.data.role === "teacher") {
                  let arr = Object.keys(res.data.teamMembers);
                  if (arr.length > 0) {
                    this.$confirm("是否选择缺勤？", "确认信息", {
                      distinguishCancelAndClose: true,
                      confirmButtonText: "选择缺勤",
                      cancelButtonText: "直接签到"
                    })
                      .then(() => {
                        this.multipleSelection = arr;
                        // forin循环对象
                        for (var i in res.data.teamMembers) {
                          Vue.set(res.data.teamMembers[i], "serial", i);
                          this.tableData.push(res.data.teamMembers[i]);
                        }
                        this.dialogTableVisible = true;
                        this.loading = false;
                      })
                      .catch(action => {
                        if (action === "cancel") {
                          this.signClick(item);
                        } else {
                          this.$message({
                            type: "info",
                            message: "取消"
                          });
                        }
                      });
                  } else {
                    this.signClick(item);
                  }
                } else {
                  this.signClick(item);
                }
                //判断code等于4415时
              } else if (res.code === 4415) {
                this.signClick(item);
              } else if (res.code === 500) {
                this.open2("失败", "未响应", "warning");
              } else if (res.code === 5001) {
                this.open2("当前用户不存在", "warning");
              } else {
                this.open2("当前信息不完整", "warning");
              }
              this.loading = false;
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //直接签到
    signClick(item) {
      this.loading = true;
      //获取数据
      let Add = {
        account: item,
        baseId: this.form.baseId
      };
      //请求
      this.$api.Basemanager.allograph(Add).then(res => {
        if (res.code === 200) {
          this.hint(res);
        } else {
          this.open2("代签失败", "warning");
          this.inp();
        }
        this.loading = false;
      });
    },
    //选择缺勤并签到
    absenceClick() {
      this.loading = true;
      let Arr = [];
      //当有学者缺勤学生时把学生编号放入数组
      //判断当已选择缺勤人员则签到
      if (this.multipleSelection.length > 0) {
        let Add = {
          absenceIds: Arr,
          account: "",
          baseId: this.form.baseId
        };
        if (this.monitor === "签到") {
          Add.account = this.ruleForm.account;
        } else {
          Add.account = this.ruleFormone.accountone;
        }
        //请求
        this.$api.Basemanager.allograph(Add)
          .then(res => {
            if (res.code === 200) {
              this.hint(res);
            } else {
              this.open2("代签失败", "warning");
              this.inp();
              this.tableData = [];
            }
            this.dialogTableVisible = false;
            this.loading = false;
          })
          .catch(err => {
            console.log(err);
          });
        //当没有缺勤人员进行提示
      } else {
        this.open2("请选择缺勤人员", "warning");
        this.loading = false;
      }
    },
    //清除input
    inp() {
      //   this.$nextTick(function(){
      //     this.ruleForm.account = ''
      //  })
    },
    //判断响应进行提示
    hint(res) {
      if (res.data.signInStatus == "CHECK_IN") {
        this.ApiTimeRecord();
        let time = steamroller(res.data.signInTime);
        this.open2(`签到时间${time}`, "success");
        this.inp();
        this.tableData = [];
      } else if (res.data.signInStatus == "SIGN_OFF") {
        this.ApiTimeRecord();
        let time = steamroller(res.data.signInTime);
        this.open2(`签退时间${time}`, "success");
        this.inp();
        this.tableData = [];
      } else if (res.data.signInStatus == "SIGNED_OFF") {
        this.open2("请勿重复签到签退", "warning");
        this.inp();
      }
    },
    handleSelectionChange(val) {
      //  this.multipleSelection = val;
    },
    Personneldetails() {
      this.loading = true
      this.dialogTableVisibleone = true;
      this.$api.Basemanager.reservationRecord(this.form.baseId).then(res => {
        this.Arron = {};
        for(let i=0; i<res.data.length;i++){
          let tmp = res.data[i];
          if ( this.Arron[tmp.oname] ) {
            this.Arron[tmp.oname].push(tmp);
          } else {
            this.Arron[tmp.oname] = [tmp];//[{name:'xx'}]
          }
        }
      }).catch(err => {
        console.log(err)
      })
      this.loading = false
    },
    //选择学生
    Selectthestudent(item,index){
      this.floa=index
      this.Studentaccount = item.account
    },
    submit(){
      this.ruleForm.account = this.Studentaccount
      this.dialogTableVisibleone = false
    },
    handleClose(){
      this.dialogTableVisibleone = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    asdaa(){
      this.floa = -1
      this.Studentaccount = ''
    },
    open2(content, type) {
      this.$message({
        message: content,
        type: type
      });
    }
  }
};
</script>
<style scoped>
.Signinsignoutone {
  width: 100%;
}
.Signinsignoutone .box {
  width: 100%;
  height: 400px;
}
.Signinsignoutone .box .title {
  font-size: 20px;
  padding-bottom: 20px;
}
.Signinsignoutone .box .yuan {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: black;
  text-align: center;
  margin: 100px auto;
  cursor: pointer;
}
.Signinsignoutone .box .yuan p {
  line-height: 150px;
  color: white;
  font-size: 22px;
  font-weight: bold;
}
.box-Time {
  overflow-y: scroll;
  height: 350px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 600px;
  height: 440px;
  overflow: hidden;
}
.studentListone{
   background: #f4f7fd;
   transition: 0.5s;
}
</style>
